<template>
    <div class="flex flex-col overflow-hidden h-full">
        <div class="wrapper flex-1 overflow-auto">
            <div class="form">
                <el-form v-if="mode !== 'read'" ref="formRef" :model="formState" name="news-edit"
                    :validate-messages="{ required: '请输入${label}' }" label-position="top">
                    <el-form-item v-show="false" prop="id">
                        <el-input v-model="formState.id" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item prop="newsTitle" label="新闻标题" :rules="[{ required: true }]">
                        <el-input type="textarea" v-model="formState.newsTitle" placeholder="请输入"
                            :autosize="{ minRows: 5 }"></el-input>
                    </el-form-item>
                    <el-form-item prop="classReal" label="新闻标签" :rules="[{ required: true, message: '请输入新的新闻标签' }]">
                        <el-select v-model="formState.classReal" :options="tagEnums"></el-select>
                    </el-form-item>

                    <el-form-item prop="siteName" label="新闻来源">
                        <el-input v-model="formState.siteName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item prop="newUrl" label="新闻网址">
                        <el-input v-model="formState.newUrl" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item prop="abstractReal" label="新闻摘要" :rules="[{ required: true }]">
                        <el-input type="textarea" v-model="formState.abstractReal" placeholder="请输入"
                            :autosize="{ minRows: 5 }"></el-input>
                    </el-form-item>
                    <el-form-item prop="markContent" label="新闻正文" v-if="mode === 'create' ">
                        <el-input type="textarea"
                            v-model="formState.markContent"
                            placeholder="请输入"
                            :autosize="{ minRows: 5 }"
                        ></el-input>
                    </el-form-item>
                </el-form>
                
                <div v-else class="detail-view">
                    <div class="detail-item">
                        <div class="detail-label">新闻标题</div>
                        <div class="detail-content">
                            <div class="news-title" :class="{ 'expanded': titleExpanded }">{{ formState.newsTitle }}</div>
                            <el-button type="text" @click="titleExpanded = !titleExpanded" class="expand-btn">
                                {{ titleExpanded ? '收起' : '展开' }}
                            </el-button>
                        </div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">新闻标签</div>
                        <div class="detail-content">
                            <span class="tag" :style="{ backgroundColor: tagEnums.find(item => item.value === formState.classReal)?.color }">
                                {{ tagEnums.find(item => item.value === formState.classReal)?.label }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">新闻来源</div>
                        <div class="detail-content">{{ formState.siteName }}</div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">新闻网址</div>
                        <div class="detail-content">
                            <a v-if="formState.newUrl" :href="formState.newUrl" target="_blank" class="news-link">{{ formState.newUrl }}</a>
                            <span v-else>无</span>
                        </div>
                    </div>
                    
                    <div class="detail-item">
                        <div class="detail-label">新闻摘要</div>
                        <div class="detail-content">{{ formState.abstractReal }}</div>
                    </div>
                </div>
            </div>
            <div class="content" v-if="mode === 'edit'">
                <div class="c-title">正文内容</div>
                <div>{{ formState.markContent }}</div>
            </div>
        </div>
        <div class="footer">
            <el-button v-if="mode !== 'read'" type="primary" @click="handleClick(formRef)">确定</el-button>
            <el-button @click="emit('close')">{{ mode === 'read' ? '关闭' : '取消' }}</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { createNews, updateNews } from '@/api/newspool'
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['close', 'refresh'])
const tagEnums = [
    { color: '#83DAAD', label: '宏观形势', value: 1, key: 'macroEnvironment' },
    { color: '#EDBF45', label: '行业动态', value: 2, key: 'industryTrends' },
    { color: '#8E63B7', label: '产业链动态', value: 3, key: 'supplyChainDynamics' },
    { color: '#E8954F', label: '国际能源观察', value: 4, key: 'internationalEnergy' },
    { color: '#697798', label: '其他', value: 0, key: 'other' },
]
const props = defineProps(['mode', 'data'])
const { mode, data } = props
const formRef = ref<FormInstance>()
const formState = ref({
    id: data?.id || undefined,
    newsTitle: data?.title || '',
    classReal: data?.classReal || 1,
    siteName: data?.siteName || '',
    newUrl: data?.sourceUrl || '',
    abstractReal: data?.abstractReal || '',
    markContent: data?.markContent || '',
    ...data
})

const titleExpanded = ref(false)

watch(props.data, (n) => {
    console.log('news data change:', n)
    formState.value = n
})

const handleClick = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid: boolean, fields: any) => {
        if (valid) {
            if (mode === 'create') {
                await createNews({ ...formState.value, addMode: 1 }).then(res => {
                    if (res.code === 200) {
                        ElMessage.success(res.message)
                        emit('close')
                    }
                })
            }
            if (mode === 'edit') {
                await updateNews({
                    id: formState.value.id,
                    title: formState.value.newsTitle,
                    classReal: formState.value.classReal,
                    siteName: formState.value.siteName,
                    sourceUrl: formState.value.newUrl,
                    abstractReal: formState.value.abstractReal,
                    markContent: formState.value.markContent
                }).then(res => {
                    if (res.code === 200) {
                        ElMessage.success(res.message)
                        emit('close')
                        emit('refresh')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(() => {
    if (mode === 'create') {
        formState.value = {
            id: undefined,
            newsTitle: '',
            classReal: 1,
            siteName: '',
            newUrl: '',
            abstractReal: '',
            markContent: '',
            addMode: 1
        }
    }
})
</script>
<script lang="ts">
export default {
}
</script>
<style scoped>
.wrapper {
    width: 500px;
    margin: 20px;
}

.form {
    margin-bottom: 20px;
}

.el-form-item__label {
    color: #606266;
}

.el-form-item__label::before {
    content: "*";
    color: red;
    margin-right: 4px;
}

.el-form-item__label:not([class*="is-required"])::before {
    content: "";
}

.el-input,
.el-select {
    width: 100%;
}

.el-textarea__inner {
    min-height: 100px;
}

.content {
    margin-top: 30px;
}

.c-title {
    font-weight: bold;
    margin-bottom: 10px;
}

.detail-view {
    padding: 0 5px;
}

.detail-item {
    margin-bottom: 20px;
}

.detail-label {
    font-weight: bold;
    color: #606266;
    margin-bottom: 8px;
    font-size: 14px;
}

.detail-content {
    font-size: 14px;
    line-height: 1.6;
    color: #303133;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.news-title {
    display: -webkit-box;
    line-clamp: unset;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}

.news-title.expanded {
    line-clamp: unset;
    -webkit-line-clamp: unset;
    display: block;
}

.expand-btn {
    padding: 0;
    margin-top: 5px;
    font-size: 12px;
    color: #409EFF;
}

.tag {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
    font-size: 12px;
}

.news-link {
    color: #409EFF;
    text-decoration: none;
    word-break: break-all;
}

.news-link:hover {
    text-decoration: underline;
}
</style>